<template>
  <div>
    <div class="border-bottom">
      <tab :tabList="tabList" :tabIndex="tabIndex" :tabBuoy="apply_count" @tabChange="getList"></tab>
    </div>

    <!-- 我的好友 -->
    <div v-if="tabIndex==0" class="padding-lr20">
      <div
        class="record_li flex padding-tb20"
        v-for="(item,index) in list"
        :key="index"
        @click="to('/recruit/card', item.user_id)"
      >
        <img class="radius-50p margin-r24" :src="item.head_img?item.head_img:$nodata" alt />
        <div class="flex-grow flex flex-column text-content">
          <div class="overflow-hidden">
            <span class="rem-30px text-33">{{item.user_name}}</span>&nbsp;
            <span class="rem-26px text-33">{{item.user_phone}}</span>&nbsp;
            <span class="rem-24px c-99">{{item.position_name}}</span>
          </div>
          <div class="rem-24px overflow-hidden">{{item.company_name}}</div>
        </div>
        <div class="contact_icon">
          <a :href="'tel:'+item.user_phone">
            <i class="iconfont icon-boda"></i>
          </a>
        </div>
      </div>
    </div>

    <!-- 列表 -->
    <div class="bg-f5" v-if="tabIndex==1">
      <div
        class="list_li bg-ff margin-b20 padding-tb30 padding-lr20"
        v-for="(item,index) in list"
        v-show="!item.show"
        :key="index"
      >
        <div class="flex" @click="to('/recruit/card', item.user_id)">
          <img class="cover_img margin-r24" :src="item.head_img" alt />
          <div class="flex flex-column justify-around">
            <div>
              <span class="text-33 rem-30px">{{item.user_name}}</span>&emsp;
              <span class="text-33 rem-26px">{{item.user_phone}}</span>&emsp;
              <span class="c-99 rem-24px">{{item.position_name}}</span>
            </div>
            <div class="rem-26px">{{item.company_name}}</div>
          </div>
        </div>
        <div class="btn flex justify-around text-center rem-26px align-center margin-t20">
          <div class="w-47p radius-15" @click="getApply(1, item.user_id, index)">
            <i class="iconfont icon-dui rem-32px"></i>&emsp;同意
          </div>
          <div class="w-47p radius-15" @click="getApply(-1, item.user_id, index)">
            <i class="iconfont icon-cuo rem-32px"></i>&emsp;拒绝
          </div>
        </div>
      </div>
    </div>

    <!-- 我的申请 -->
    <div class="bg-f5" v-if="tabIndex==2">
      <div
        class="list_li bg-ff margin-b20 padding-tb30 padding-lr20"
        v-for="(item,index) in list"
        v-show="!item.show"
        :key="index"
      >
        <div class="flex" @click="to('/recruit/card', item.user_id)">
          <img class="cover_img margin-r24" :src="item.head_img?item.head_img:$nologin" alt />
          <div class="flex flex-column justify-around">
            <div>
              <span class="text-33 rem-30px">{{item.user_name}}</span>&emsp;
              <span class="text-33 rem-26px">{{item.user_phone}}</span>&emsp;
              <span class="c-99 rem-24px">{{item.position_name}}</span>
            </div>
            <div class="rem-26px">{{item.company_name}}</div>
          </div>
        </div>
        <div class="btn flex justify-around text-center rem-26px align-center margin-t20">
          <div class="w-47p radius-15" @click="setMyApply(1, item.user_id, index)">
            <i class="iconfont rem-32px icon-shuaxin"></i>&emsp;重新申请
          </div>
          <div class="w-47p radius-15" @click="setMyApply(2, item.user_id, index)">
            <i class="iconfont icon-cuo rem-32px"></i>&emsp;取消申请
          </div>
        </div>
      </div>
    </div>

    <load @loadData="getFriend" :list="list" :total="total" :nodata="list.length<10?true:false"></load>
  </div>
</template>

<script>
import tab from "../../components/tab";
import load from "../../components/load";
export default {
  components: {
    tab,
    load
  },
  data() {
    return {
      tabList: ["我的好友", "好友申请", "我的申请"],
      tabIndex: 0,
      apply_count: 0,
      list: [],
      total: 0
    };
  },
  mounted() {
    document.querySelector("html").style.backgroundColor = "#ffffff";
    this.tabIndex = localStorage.getItem("friend_index")
      ? parseInt(localStorage.getItem("friend_index"))
      : 0;
    this.getFriend(1);
    this.getFriendNum()
  },
  methods: {
    getList(e) {
      this.tabIndex = e;
      this.list = [];
      localStorage.setItem("friend_index", e);
      this.getFriend(1);
    },
    getFriendNum() {
      this.$axios
        .post("/wap/personal/card", {
          token: localStorage.getItem("token"),
          type: 1
        })
        .then(res => {
          this.apply_count = res.data.data.friend_account;
        });
    },
    getFriend(page) {
      this.$axios
        .post("/wap/personal/friend", {
          token: localStorage.getItem("token"),
          type: this.tabIndex + 1,
          page: page,
          limit: 10
        })
        .then(res => {
          if (page == 1) {
            this.list = [];
            this.topList = [];
          }
          if (res.data.data.length == 0) {
            this.total++;
            return false;
          }
          for (let i in res.data.data) {
            this.list.push(res.data.data[i]);
          }
        });
    },
    getApply(type, id, index) {
      this.$axios
        .post("/wap/handle/apply", {
          token: window.localStorage.getItem("token"),
          type: type,
          user_id: id
        })
        .then(res => {
          this.$toast(res.data.msg);
          this.$set(this.list[index], "show", true);
          // this.list = [];
          this.getFriendNum()
        });
    },
    setMyApply(type, id, index) {
      this.$axios
        .post("/wap/handle/myApply", {
          token: window.localStorage.getItem("token"),
          type: type,
          user_id: id
        })
        .then(res => {
          this.$toast(res.data.msg);
          if (type == 2) {
            this.$set(this.list[index], "show", true);
          }
          // this.list = [];
          this.getFriendNum()
        });
    },
    to(path, id) {
      this.$router.push({
        path: path,
        query: {
          id: id
        }
      });
    }
  }
};
</script>

<style scoped>
.cover_img {
  width: 0.98rem;
  height: 0.98rem;
  display: block;
  border-radius: 50%;
}
.icon-dui {
  color: rgb(6, 148, 38);
}
.icon-cuo {
  color: rgb(223, 18, 23);
}
.btn > div {
  border: 0.01rem solid #e4e4e4;
  height: 0.74rem;
  line-height: 0.74rem;
}
.rem-32px {
  font-size: 0.32rem;
  vertical-align: middle;
}
/* 申请记录 */
.record_li img {
  width: 0.94rem;
  height: 0.94rem;
}
.contact_icon {
  width: 0.72rem;
  height: 0.72rem;
  line-height: 0.72rem;
  border: 0.01rem solid #ffcccc;
  border-radius: 50%;
  text-align: center;
}
.contact_icon .iconfont {
  font-size: 0.36rem;
  color: #ff0404;
}
.icon-shuaxin {
  color: rgb(6, 148, 38);
}
</style>